<template>
	<view>
		<!-- 导航 -->
		<uni-nav-bar title="业务" :border="false" :statusBar="true" leftIcon="back" :fixed="true" @clickLeft="back"></uni-nav-bar>

		<!-- main -->
		<view class="business_main">
			<!-- 联系信息 -->
			<view class="contact_information">
				<view class="title">
					<text>联系信息</text>
				</view>
				<view class="input_container">
					<view class="input_one">
						<span>联系人</span>
						<input class="one-input" focus placeholder="请输入" />
					</view>
					<view class="input_two">
						<span>联系电话</span>
						<input class="one-input" focus placeholder="请输入" />
					</view>
				</view>
			</view>
			<!-- 基础信息 -->
			<view class="basics_information">
				<view class="title">
					<text>基础信息</text>
				</view>
				<view class="basics_information_inputOne">
					<span>项目名称</span>
					<input class="one-input" focus placeholder="请输入" />
				</view>
				<view class="basics_information_inputTwo">
					<view class="input_one">
						<span>项目规模</span>
						<view class="right">
							<span>请选择</span>
							<uni-icons class="uni-icons" type="arrowright" size="16" color="#C9C9C9"></uni-icons>
						</view>
					</view>
					<view class="input_one">
						<span>业务阶段</span>
						<view class="right">
							<span>请选择</span>
							<uni-icons class="uni-icons" type="arrowright" size="16" color="#C9C9C9"></uni-icons>
						</view>
					</view>
					<view class="input_one">
						<span>业务结果</span>
						<view class="right">
							<span>请选择</span>
							<uni-icons class="uni-icons" type="arrowright" size="16" color="#C9C9C9"></uni-icons>
						</view>
					</view>
					<view class="input_one">
						<span>项目立项日期</span>
						<view class="right">
							<span>请选择</span>
							<uni-icons class="uni-icons" type="arrowright" size="16" color="#C9C9C9"></uni-icons>
						</view>
					</view>
					<view class="input_one">
						<span>项目开始日期</span>
						<view class="right">
							<span>请选择</span>
							<uni-icons class="uni-icons" type="arrowright" size="16" color="#C9C9C9"></uni-icons>
						</view>
					</view>
					<view class="input_one">
						<span>项目结束时间</span>
						<view class="right">
							<span>请选择</span>
							<uni-icons class="uni-icons" type="arrowright" size="16" color="#C9C9C9"></uni-icons>
						</view>
					</view>
					<view class="input_one">
						<span>业务事项陈述</span>
					</view>
					<view class="uni-textarea">
						<textarea placeholder="请输入" />
					</view>
				</view>
				<!-- 相关费用 -->
				<view class="xgfy">
					<view class="title">
						<text>相关费用</text>
					</view>
					<view class="input_one">
						<span>洽谈餐饮费</span>
						<view class="right">
							<span>请选择</span>
							<uni-icons class="uni-icons" type="arrowright" size="16" color="#C9C9C9"></uni-icons>
						</view>
					</view>
					<view class="input_one">
						<span>洽谈住宿费</span>
						<view class="right">
							<span>请选择</span>
							<uni-icons class="uni-icons" type="arrowright" size="16" color="#C9C9C9"></uni-icons>
						</view>
					</view>
					<view class="input_one">
						<span>项目总金额</span>
						<view class="right">
							<span>请选择</span>
							<uni-icons class="uni-icons" type="arrowright" size="16" color="#C9C9C9"></uni-icons>
						</view>
					</view>
				</view>
				<!-- 信息 -->
				<view class="xx">
					<view class="title">
						<text>信息</text>
					</view>
					<view class="input_one">
						<span>申报人</span>
						<view class="right">
							<span>李荣浩</span>
							<uni-icons class="uni-icons" type="arrowright" size="16" color="#C9C9C9"></uni-icons>
						</view>
					</view>
					<view class="input_one">
						<span>汇报类型</span>
						<view class="right">
							<span>请选择</span>
							<uni-icons class="uni-icons" type="arrowright" size="16" color="#C9C9C9"></uni-icons>
						</view>
					</view>
					<view class="input_one">
						<span>项目</span>
						<view class="right">
							<span>请选择</span>
							<uni-icons class="uni-icons" type="arrowright" size="16" color="#C9C9C9"></uni-icons>
						</view>
					</view>
					<view class="input_one">
						<span>责任人</span>
						<view class="right">
							<span>请选择</span>
							<uni-icons class="uni-icons" type="arrowright" size="16" color="#C9C9C9"></uni-icons>
						</view>
					</view>
				</view>
				<button class="btn" type="primary">提交</button>
			</view>

		</view>

	</view>
</template>



<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		data() {
			return {

			};
		},
		components: {
			uniNavBar,uniIcons
		},
		methods: {
			back() {
				uni.switchTab({
					url: '/pages/tabbar/tabbar-3/tabbar-3'
				})
			}
		}
	}
</script>

<style lang="less">
	// 基础信息
	.contact_information {
		height: 340rpx;
		width: 100%;
		background-color: #F8F9FC;

		.title {
			height: 53px;
			width: 100%;
			font-size: 28rpx;
			color: #909090;
			position: relative;

			text {
				position: absolute;
				left: 40rpx;
				top: 54rpx;
				margin-bottom: 24rpx;
			}
		}

		.input_container {
			background-color: #FFFFFF;
			height: 224rpx;
			width: 100%;

			.input_one {
				display: flex;
				height: 112rpx;
				width: 100%;
				align-items: center;
				border-bottom: 1px solid #EAEAEA;

				span {
					margin-left: 20px;
					margin-right: 100rpx;
					font-size: 32rpx;
				}
			}

			.input_two {
				display: flex;
				height: 112rpx;
				width: 100%;
				align-items: center;
				border-bottom: 1px solid #EAEAEA;

				span {
					margin-left: 20px;
					margin-right: 66rpx;
					font-size: 32rpx;
					
					.uni-icons {
						margin-left: 32rpx;
					}
				}
			}
		}

	}

	.basics_information {
		height: 1116rpx;
		width: 100%;
		background-color: #F8F9FC;

		.title {
			height: 53px;
			width: 100%;
			font-size: 28rpx;
			color: #909090;
			position: relative;

			text {
				position: absolute;
				left: 40rpx;
				top: 54rpx;
				margin-bottom: 24rpx;
			}
		}

		.basics_information_inputOne {
			display: flex;
			height: 112rpx;
			width: 100%;
			align-items: center;
			background-color: #FFFFFF;
			border-bottom: 1px solid #EAEAEA;

			span {
				margin-left: 20px;
				margin-right: 66rpx;
				font-size: 32rpx;
			}
		}
		.basics_information_inputTwo {
			height: 908rpx;
			width: 100%;
			
			.input_one {
				height: 112rpx;
				width: 100%;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				justify-content: space-between;
				
				span {
					margin-left: 20px;
				}
				
				.right {
					margin-right: 42rpx;
					color: #C9C9C9;
					
					.uni-icons {
						margin-left: 32rpx;
					}
				}
			}
		}
		.xgfy {
			width: 100%;
			background-color: #F8F9FC;
			height: 450rpx;
			
			.title {
				height: 53px;
				width: 100%;
				font-size: 28rpx;
				color: #909090;
				position: relative;
			
				text {
					position: absolute;
					left: 40rpx;
					top: 54rpx;
					margin-bottom: 24rpx;
				}
			}
			.input_one {
				height: 112rpx;
				width: 100%;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				justify-content: space-between;
				
				span {
					margin-left: 20px;
				}
				
				.right {
					margin-right: 42rpx;
					color: #C9C9C9;
					
					.uni-icons {
						margin-left: 32rpx;
					}
				}
			}
		}
		.xx {
			width: 100%;
			background-color: #F8F9FC;
			height: 450rpx;
			
			.title {
				height: 53px;
				width: 100%;
				font-size: 28rpx;
				color: #909090;
				position: relative;
			
				text {
					position: absolute;
					left: 40rpx;
					top: 54rpx;
					margin-bottom: 24rpx;
				}
			}
			.input_one {
				height: 112rpx;
				width: 100%;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				justify-content: space-between;
				
				span {
					margin-left: 20px;
				}
				
				.right {
					margin-right: 42rpx;
					color: #C9C9C9;
					
					.uni-icons {
						margin-left: 32rpx;
					}
				}
			}
		}
		.btn {
			margin: 24rpx 40rpx;
		}
	}
	.uni-textarea {
					height: 120rpx;
					width: 100%;
					background-color: #FFFFFF;
					margin-left: 40rpx;
				}
</style>
